<template>
  <div id="ban">
    <el-button @click="setCode" v-if="setShow">设置</el-button>
    <div class="flex top-title">
      <span>版</span>
      <el-pagination
        layout="prev, pager, next"
        :page-size="1"
        :total="banTotal"
        background
        :current-page="banIndex"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-table
      :data="tableList"
      :default-sort="{ prop: 'date', order: 'descending' }"
      :cell-class-name="clickCellName"
      :cell-style="setCellStyle"
      border
      :header-cell-style="headerCellStytle"
      @cell-click="clickCell"
      @cell-dblclick="cellDblclick"
    >
      <el-table-column
        v-for="(item, index) in columnList"
        :key="index"
        align="center"
        :label="item.id.toString()"
        :index="index"
        width="54%"
      >
        <template ate slot-scope="scope">
          <div v-if="scope.row[index]" class="footer-item">
            {{
            scope.row[index].s.length > 2
            ?
            /[a-z]/i.test(scope.row[index].s) ?
            scope.row[index].s.substring(scope.row[index].s.length,scope.row[index].s.length-5):
            scope.row[index].s.substring(scope.row[index].s.length,scope.row[index].s.length-3)
            :
            scope.row[index].m == 'S' ? '标准'
            :
            scope.row[index].m == 'H'? '高'
            :
            scope.row[index].m == 'M' ? '中'
            :
            scope.row[index].m == "L" ? '低'
            :
            scope.row[index].s
            }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      选项：
      <div
        v-for="(item, index) in banList"
        :key="index"
        class="footer-item"
        :style="selectBan == item ? 'background-color:#188ef2' : ''"
        @click="clickFooter(item)"
      >
        <span>{{ item }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    //选中编码数据
    codeList: {
      type: Array,
      default: () => []
    },
    // 板格式
    banList: {
      type: Array,
      default: () => ["S", "H", "M", "L", "清"]
    },
    // 是否显示设置按钮
    setShow: {
      type: Boolean,
      default: false
    },
    // 板数量
    banTotal: {
      type: Number,
      default: 8
    },
    // 列数
    columnList: {
      type: Array,
      default: () => [
        { id: "1", type: "" },
        { id: "2", type: "" },
        { id: "3", type: "" },
        { id: "4", type: "" },
        { id: "5", type: "" },
        { id: "6", type: "" },
        { id: "7", type: "" },
        { id: "8", type: "" },
        { id: "9", type: "" },
        { id: "10", type: "" },
        { id: "11", type: "" },
        { id: "12", type: "" }
      ]
    },
    // 行数
    rowList: {
      type: Array,
      default: () => ["A", "B", "C", "D", "E", "F", "G", "H"]
    },
    direction: {
      type: Object,
      default: () => {
        return {
          data: "横向",
          key: "horizontal" // vertical
        };
      }
    }
  },
  data() {
    return {
      dataList: [],
      banIndex: 1, //板号
      rowIndex: "", //当前行
      columnIndex: "", //当前点击单元格下标
      cellrow: {}, //当前点击行
      column: {}, //当前点击单元格下标
      tableList: [], // 方案数据
      selectBan: "" //选中的脚标
    };
  },
  mounted() {
    this.getDataList();
    this.getList();
  },
  methods: {
    getDataList() {
      this.dataList = this.initBan(this.banTotal);
    },
    // 初始化布板
    initBan(num) {
      var column = [];
      var row = this.columnList;
      var result = [];

      if (this.direction.key == "horizontal") {
        column = this.rowList;
        for (let banIndex = 0; banIndex < num; banIndex++) {
          for (const columnIndex in column) {
            for (const rowIndex in row) {
              if (row[rowIndex].type == "") {
                let item = {
                  ban: banIndex + 1,
                  r: row[rowIndex].id,
                  col: column[columnIndex],
                  pos: [
                    banIndex + 1,
                    column[columnIndex],
                    row[rowIndex].id < 10
                      ? "0" + row[rowIndex].id
                      : row[rowIndex].id
                  ].join("-"),
                  key: "",
                  s: "",
                  m: "",
                  exist: "N"
                };
                result.push(item);
              }
            }
          }
        }
      } else {
        //定义基本参数
        this.$rowData.forEach((item, index) => {
          if (index < row.length - 1) {
            column[index] = item;
          }
        });
        for (let banIndex = 0; banIndex < num; banIndex++) {
          for (const columnIndex in column) {
            for (const rowIndex in row) {
              if (row[rowIndex].type == "") {
                if (columnIndex < this.rowList.length) {
                  let item = {
                    ban: banIndex + 1,
                    r: Number(columnIndex) + 1,
                    col: row[Number(columnIndex) + 1].id,
                    pos: [
                      banIndex + 1,
                      column[rowIndex - 1],
                      Number(columnIndex) + 1 < 10
                        ? 0 + Number(columnIndex) + 1
                        : Number(columnIndex) + 1
                    ].join("-"),
                    key: "",
                    s: "",
                    m: "",
                    exist: "N"
                  };
                  result.push(item);
                }
              }
            }
          }
        }
      }

      result.map((item, index) => {
        item.key = index + 1;
      });
      return result;
    },
    // 获取数组
    getList() {
      // 自定义数组
      let myDataList = [];
      if (this.direction.key == "horizontal") {
        // 根据板行数循环标题
        this.rowList.forEach((item, index) => {
          myDataList[index] = [{ pos: item, s: item }];
        });
      } else {
        // 根据板行数循环标题
        this.rowList.forEach((item, index) => {
          myDataList[index] = [{ pos: index + 1, s: index + 1 }];
        });
      }

      // 遍历数组修改格式
      this.dataList.forEach((item, index) => {
        // 根据版号赋值数据
        if (item.ban == this.banIndex) {
          switch (item.pos.split("-")[1]) {
            case item.pos.split("-")[1]:
              this.$rowData.forEach((ri, rn) => {
                if (
                  ri ==
                  (this.direction.key == "horizontal"
                    ? item.pos.split("-")[1]
                    : item.col)
                ) {
                  myDataList[rn].push(item);
                }
              });
              break;
          }
        }
      });
      this.tableList = myDataList; //赋值自定义数组
    },
    // 点击单元格
    clickCell(row, column, cell, event) {
      this.cellrow = row; //获取当前点击行
      this.column = column; //获取当前点击单元格（下标）
      this.rowIndex = row.index; //当前点击行index
      this.columnIndex = column.index; //当前点击单元格下标

      // 当点击左侧英文时调用方法
      if (column.index == 0) {
        this.clickColumn(row, column);
      }
      // 如果选中了下面的英文就进入单击模式
      if (this.selectBan != "") {
        this.cellDblclick(row, column, []);
      }
    },
    // 设置单元格数据 || 双击单元格
    cellDblclick(row, column, data) {
      // 判断是设置还是双击
      if (this.direction.key == "horizontal") {
        if (data.length > 0) {
          this.selectBan = ""; //设置清空板
          let dataIndex = 0;
          this.dataList.forEach((item, index) => {
            if (item.pos == row[column.index].pos) {
              // 判断单元格是否存在参数
              if (item.s) {
                if (item.m) {
                  this.$confirm("此批样本中不存在可布板样本！", "失败", {
                    showCancelButton: false,
                    type: "error"
                  });
                  return;
                }

                if (this.selectBan == "清") {
                  // 获取当前定位，根据全部数据长度来循环
                  for (
                    let i = parseInt(row[column.index].key - 1);
                    i < this.dataList.length;
                    i++
                  ) {
                    // 如果当前没有参数则返回继续循环
                    if (this.dataList[i].m != "") {
                      continue;
                    }
                    // 设置参数
                    this.dataList[i].s = data[dataIndex];
                    dataIndex++;
                    // 赋值完毕退出循环
                    if (dataIndex >= data.length) {
                      break;
                    }
                  }
                } else {
                  this.$confirm("此位置已编号，是否替换？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                  })
                    .then(() => {
                      // 获取当前定位，根据全部数据长度来循环
                      for (
                        let i = parseInt(row[column.index].key - 1);
                        i < this.dataList.length;
                        i++
                      ) {
                        // 如果当前没有参数则返回继续循环
                        if (this.dataList[i].m != "") {
                          continue;
                        }
                        // 设置参数
                        this.dataList[i].s = data[dataIndex];
                        dataIndex++;
                        // 赋值完毕退出循环
                        if (dataIndex >= data.length) {
                          break;
                        }
                      }
                    })
                    .catch(() => {});
                }
              } else {
                // 获取当前定位，根据全部数据长度来循环
                for (
                  let i = parseInt(row[column.index].key - 1);
                  i < this.dataList.length;
                  i++
                ) {
                  // 如果当前没有参数则返回继续循环
                  if (this.dataList[i].m != "") {
                    continue;
                  }
                  // 设置参数
                  this.dataList[i].s = data[dataIndex];

                  dataIndex++;
                  // 赋值完毕退出循环
                  if (dataIndex >= data.length) {
                    break;
                  }
                }
              }
            }
          });
        } else {
          if (
            this.dataList[row[column.index].key - 1] &&
            this.dataList[row[column.index].key - 1].s
          ) {
            if (this.selectBan == "清") {
              var selectBan = this.selectBan;
              if (selectBan == "清") {
                selectBan = "";
              }
              if (this.dataList[row[column.index].key - 1]) {
                this.dataList[row[column.index].key - 1].s = selectBan;
                this.dataList[row[column.index].key - 1].m = selectBan;
              }
            } else {
              this.$confirm("此位置已编号，是否替换？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              })
                .then(() => {
                  var selectBan = this.selectBan;
                  if (selectBan == "清") {
                    selectBan = "";
                  }
                  if (this.dataList[row[column.index].key - 1]) {
                    this.dataList[row[column.index].key - 1].s = selectBan;
                    this.dataList[row[column.index].key - 1].m = selectBan;
                  }
                })
                .catch(() => {});
            }
          } else {
            let selectBan = this.selectBan;
            if (selectBan == "清") {
              selectBan = "";
            }
            if (this.dataList[row[column.index].key - 1]) {
              this.dataList[row[column.index].key - 1].s = selectBan;
              this.dataList[row[column.index].key - 1].m = selectBan;
            }
          }
        }
      } else if (this.direction.key == "vertical") {
        if (data.length > 0) {
          this.selectBan = ""; //设置清空板
          let R = this.rowNum;
          let C = this.colNum;
          let B = this.banTotal;
          let key = row[column.index].key - 1;
          let seq = []; //竖向排版总和

          // 计算纵向位置
          for (let ban = 0; ban < B; ban++) {
            for (let col = 0; col < C; col++) {
              for (let row = 0; row < R; row++) {
                seq.push(row * C + col + ban * (R * C));
              }
            }
          }

          let Z = Math.floor(parseInt(key) / C); //取整
          let Y = parseInt(key) % C; //取余
          let startPos = Y * R + Z;
          // 填充赋值
          for (let i = 0; i < seq.length; i++) {
            let pos = seq[startPos + i];
            // 如果当前没有参数则返回继续循环
            if (this.dataList[pos].m != "") {
              startPos++;
              i--;
              continue;
            }
            this.dataList[pos].s = data[i];

            // 赋值完毕退出循环
            if (i >= data.length - 1) {
              break;
            }
          }
        } else {
          if (
            this.dataList[row[column.index].key - 1] &&
            this.dataList[row[column.index].key - 1].s
          ) {
            if (this.selectBan == "清") {
              var selectBan = this.selectBan;
              if (selectBan == "清") {
                selectBan = "";
              }
              if (this.dataList[row[column.index].key - 1]) {
                this.dataList[row[column.index].key - 1].s = selectBan;
                this.dataList[row[column.index].key - 1].m = selectBan;
              }
            } else {
              this.$confirm("此位置已编号，是否替换？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              })
                .then(() => {
                  var selectBan = this.selectBan;
                  if (selectBan == "清") {
                    selectBan = "";
                  }
                  if (this.dataList[row[column.index].key - 1]) {
                    this.dataList[row[column.index].key - 1].s = selectBan;
                    this.dataList[row[column.index].key - 1].m = selectBan;
                  }
                })
                .catch(() => {});
            }
          } else {
            let selectBan = this.selectBan;
            if (selectBan == "清") {
              selectBan = "";
            }
            if (this.dataList[row[column.index].key - 1]) {
              this.dataList[row[column.index].key - 1].s = selectBan;
              this.dataList[row[column.index].key - 1].m = selectBan;
            }
          }
        }
      }
    },
    // 点击左侧英文
    clickColumn(row, column) {
      let list = this.dataList;
      // if (v) {
      this.$confirm("是否清除整行数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // 获取当前行长度，减去字母ABCDEFGH，也就是减1
          let dataIndex = row.length - 1;
          // 计算当前点击位置和行相加长度
          let countLength = parseInt(row[1].key - 1) + parseInt(row.length - 1);

          // 获取当前定位，根据全部数据长度来循环
          for (let i = parseInt(row[1].key - 1); i < countLength; i++) {
            // 如果当前没有参数则返回继续循环
            if (list[i].m != "") {
              // 设置参数
              list[i].s = "";
              continue;
            }

            dataIndex--;
            // 赋值完毕退出循环
            if (dataIndex >= row.length - 1) {
              break;
            }
          }
        })
        .catch(() => {});
      // }
    },
    // 点击单元格设置样式
    clickCellName({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex;
      column.index = columnIndex;
      if (columnIndex == 0) {
      }
    },
    // 设置单元格样式
    setCellStyle({ row, column, rowIndex, columnIndex }) {
      if (this.direction.key == "horizontal") {
        if (
          columnIndex != 0 &&
          rowIndex === this.rowIndex &&
          columnIndex === this.columnIndex
        ) {
          return { "background-color": "#188ef2", color: "#fff" };
        }

        if (
          row[column.index].s != undefined &&
          row[column.index].s.length > 2 &&
          /[a-z]/i.test(row[column.index].s)
        ) {
          return { "background-color": "#fa6197", color: "#fff" };
        }
        if (
          row[column.index].s != "" &&
          row[column.index].exist == "N" &&
          row[column.index].m == ""
        ) {
          return { "background-color": "#d4eafd", color: "#333" };
        }
        if (
          row[column.index].s != "" &&
          row[column.index].exist == "Y" &&
          row[column.index].m == ""
        ) {
          return { "background-color": "#266af3", color: "#fff" };
        }
        if (row[column.index].m && row[column.index].m != "") {
          return { "background-color": "#6194fa", color: "#fff" };
        }
      } else {
        if (column.index < row.length) {
          if (
            columnIndex != 0 &&
            rowIndex === this.rowIndex &&
            columnIndex === this.columnIndex
          ) {
            return { "background-color": "#188ef2", color: "#fff" };
          }

          if (
            row[column.index].s != undefined &&
            row[column.index].s.length > 2 &&
            /[a-z]/i.test(row[column.index].s)
          ) {
            return { "background-color": "#fa6197", color: "#fff" };
          }
          if (
            row[column.index].s != "" &&
            row[column.index].exist == "N" &&
            row[column.index].m == ""
          ) {
            return { "background-color": "#d4eafd", color: "#333" };
          }
          if (
            row[column.index].s != "" &&
            row[column.index].exist == "Y" &&
            row[column.index].m == ""
          ) {
            return { "background-color": "#266af3", color: "#fff" };
          }
          if (row[column.index].m && row[column.index].m != "") {
            return { "background-color": "#6194fa", color: "#fff" };
          }
        }
      }
    },
    // 设置表头（凸显板数）
    headerCellStytle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        return { color: "red", "border-bottom": "none" };
      }
      return { background: "#f2f2f2", color: "#333" };
    },
    // 切换分页
    handleCurrentChange(v) {
      this.banIndex = v;
      this.$set(this.columnList, 0, { id: this.banIndex, type: "banIndex" });
      this.getList();
    },
    // 设置编码
    setCode() {
      // 判断是否选中单元格、是否选择插入编码
      if (this.column.index == undefined) {
        this.$confirm("请选择起始位置！", "错误", {
          showCancelButton: false,
          type: "error"
        }).then(() => {});
      } else if (this.codeList.length <= 0) {
        this.$confirm("请选择要插入的样本！", "错误", {
          showCancelButton: false,
          type: "error"
        }).then(() => {});
      } else {
        this.cellDblclick(this.cellrow, this.column, this.codeList);
      }
    },
    // 点击脚标
    clickFooter(val) {
      switch (val) {
        case "S":
          this.selectBan = "S";
          break;
        case "H":
          this.selectBan = "H";
          break;
        case "M":
          this.selectBan = "M";
          break;
        case "L":
          this.selectBan = "L";
          break;
        case "清":
          this.selectBan = "清";
          break;
      }
    }
  },
  watch: {
    dataList: {
      handler(newVal, oldVal) {
        this.$emit("chanageDataList", newVal);
      },
      deep: true
    },
    banTotal: {
      handler(newVal, oldVal) {
        this.dataList = this.initBan(newVal);
      },
      deep: true
    }
  }
};
</script>

<style lang="less">
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
#ban {
  .el-table__header-wrapper {
    width: 100%;
    display: flex;
    .el-table__header {
      width: 100% !important;
      display: flex;
      .has-gutter {
        width: 100%;
        tr {
          width: 100%;
          display: flex;
          th {
            flex: 1;
            flex: 1;
            display: flex;
            align-items: center;
            font-size: 0.3rem;
            padding: 0;
          }
        }
      }
    }
  }
  .el-table__body {
    width: 100% !important;
    display: flex;
    tbody {
      width: 100%;
      display: flex;
      flex-direction: column;
      tr {
        display: flex;
        width: 100%;
        flex: 1;
        td {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
  width: 100%;
  .top-title {
    justify-content: flex-start;
    padding: 0 20px;
    font-weight: 600;
  }
  .el-table::before {
    height: 0;
  }
  .el-table::after {
    height: 0;
  }
  padding: 5px;
  .el-table {
    padding: 20px;
    border: none;
    width: 100%;
    height: 100%;
    color: #333;
    cursor: pointer;
    user-select: none;
    .el-table__body-wrapper {
      .el-table__body {
        .el-table__row {
          .el-table_1_column_1,
          .el-table_1_column_2,
          .el-table_1_column_3,
          .el-table_1_column_4,
          .el-table_1_column_5,
          .el-table_1_column_6,
          .el-table_1_column_7,
          .el-table_1_column_8,
          .el-table_1_column_9,
          .el-table_1_column_10,
          .el-table_1_column_11,
          .el-table_1_column_12,
          .el-table_1_column_13 {
            border: none;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            .cell {
              line-height: 2;
            }
          }
          .el-table_1_column_1 {
            border-bottom: 0;
          }
          td {
            height: 30px !important;
          }
        }
        .el-table__row:nth-last-child(0) {
          .el-table_1_column_1,
          .el-table_1_column_2,
          .el-table_1_column_3,
          .el-table_1_column_4,
          .el-table_1_column_5,
          .el-table_1_column_6,
          .el-table_1_column_7,
          .el-table_1_column_8,
          .el-table_1_column_9,
          .el-table_1_column_10,
          .el-table_1_column_11,
          .el-table_1_column_12,
          .el-table_1_column_13 {
            border: none;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            .cell {
              line-height: 2;
            }
          }
        }
        .el-table__row:first-child {
          .el-table_1_column_1,
          .el-table_1_column_2,
          .el-table_1_column_3,
          .el-table_1_column_4,
          .el-table_1_column_5,
          .el-table_1_column_6,
          .el-table_1_column_7,
          .el-table_1_column_8,
          .el-table_1_column_9,
          .el-table_1_column_10,
          .el-table_1_column_11,
          .el-table_1_column_12,
          .el-table_1_column_13 {
            border: none;
            border-right: 1px solid #000;
            border-top: 1px solid #000;
            .cell {
              line-height: 2;
            }

            border-bottom: 1px solid #000;
          }
          .el-table_1_column_1 {
            border-bottom: 0;
            border-top: 0;
          }
        }
      }
    }
  }
  .footer {
    user-select: none;
    .flex;
    justify-content: flex-start;
    margin-left: 1.5rem;
    height: 60px;
    .footer-item {
      cursor: pointer;
      .flex;
      height: 80%;
      width: 50px;
      span {
        .flex;
        height: 60%;
        width: 60%;
        border-radius: 60%;
        background: #188ef2;
        color: #fff;
      }
    }
    .footer-item:hover {
      background: #188ef2;
      color: #fff;
    }
  }
}
</style>
